<template>
  <a-card size="small">
    <a-table
      :columns="columns"
      :data-source="userData"
      bordered
      rowKey="_id"
      size="small"
      :pagination="false"
    >
      <span slot="roleTags" slot-scope="roleTags">
        <a-tag color="blue">{{ roleTags}}</a-tag>
      </span>
      <span slot="jobTags" slot-scope="jobTags">
        <a-tag color="green">{{ jobTags}}</a-tag>
      </span>
      <span slot="action" slot-scope="userInfo">
        <a-button
          type="primary"
          @click="showUpdateModal(userInfo)"
          :disabled="!hasPerms('edit')"
          size="small"
        >修改</a-button>
        <a-divider type="vertical" />
        <a-popconfirm
          title="确定删除？"
          ok-text="是"
          cancel-text="否"
          @confirm="sureDelete(userInfo)"
          @cancel="cancelDelete"
        >
          <a-button
            v-permission="{action:'delete', effect:'disabled'}"
            size="small"
            type="primary"
          >删除</a-button>
        </a-popconfirm>
      </span>
    </a-table>

    <div class="pagination">
      <a-pagination
        size="small"
        :total="this.total"
        show-size-changer
        show-quick-jumper
        :defaultPageSize="this.pageSize"
        :pageSizeOptions="['2','5','10','15']"
        :show-total="total => `共${this.total}条`"
        @change="currentSizeData"
        @showSizeChange="changeSize"
      />
    </div>
    <UpdateUser ref="modal" :curUserInfo="curUserInfo" @refreshTable="refreshTable" />
  </a-card>
</template>

<script>
import { getAllUser, deleteUser } from '@/network/user.js'
import { getRoleName } from '@/network/role.js'
import { formateDate } from '@/utils/dateUtils.js'

import UpdateUser from './UpdateUser'
import { hasPermission } from '@/utils/permission.js'

const columns = [
  {
    title: '用户名',
    dataIndex: 'username',
    align: 'center',
  },
  {
    title: '邮箱',
    dataIndex: 'email',
    align: 'center',
  },
  {
    title: '联系方式',
    dataIndex: 'phone',
    align: 'center',
  },
  {
    title: '所属角色',
    align: 'center',
    dataIndex: 'roleName',
    scopedSlots: { customRender: 'roleTags' },
  },
  {
    title: '职称',
    align: 'center',
    dataIndex: 'job',
    scopedSlots: { customRender: 'jobTags' },
  },
  {
    title: '注册时间',
    dataIndex: 'create_time',
    align: 'center',
    customRender: formateDate
  },
  {
    title: '操作',
    align: 'center',
    scopedSlots: { customRender: 'action' },
  },
];

export default {
  name: 'userManager',
  data () {
    return {
      userData: [],
      columns,
      pageNum: 1,
      pageSize: 5,
      total: 0,
      updateUserModal: false, //更新用户的modal
      curUserInfo: {}
    };
  },
  components: {
    UpdateUser
  },
  computed: {

  },
  mounted () {
    this.getAllUser(this.pageNum, this.pageSize)
  },
  methods: {
    //获取所有用户列表
    async getAllUser (pageNum, pageSize) {
      const usersInfos = await getAllUser(pageNum, pageSize)
      console.log(usersInfos)
      if (usersInfos.status == 200) {
        this.total = usersInfos.data.data.total
        for (let item of usersInfos.data.data.list) {
          const curRoleId = item.role_id
          //有的用户还没有角色，防止因为传空值给后端接口造成问题
          if (curRoleId != '') {
            //根据roleid获取角色名称
            const curRoleName = await getRoleName(curRoleId)
            item.roleName = curRoleName.data.data
          }
        }
        this.userData = usersInfos.data.data.list
      }
    },
    //删除一个用户
    sureDelete (userInfo) {
      console.log(userInfo)
      deleteUser(userInfo._id).then(res => {
        if (res.data.status === 200) {
          this.$message.success(res.data.msg)
          //删除用户之后重新获取所有用户
          this.getAllUser(this.pageNum, this.pageSize)
        }
      })
    },
    //取消删除
    cancelDelete () {
      this.$message.success('取消删除成功')
    },
    //点击页码重新发起请求
    currentSizeData (currentPage, pageSize) {
      this.pageNum = currentPage
      this.getAllUser(this.pageNum, this.pageSize)
    },
    //改变页码时，重新获取数据
    changeSize (current, size) {
      this.pageSize = size
      this.getAllUser(current, this.pageSize)
    },
    //显示更新用户的modal
    showUpdateModal (userInfo) {
      console.log(userInfo)
      this.curUserInfo = userInfo
      this.$refs.modal.show()
    },
    //更新完页面之后，关闭modal，刷新table
    refreshTable () {
      this.getAllUser(this.pageNum, this.pageSize)
    },
    //判断是否有权限
    hasPerms (perms) {
      // 根据权限标识和外部指示状态进行权限判断
      return hasPermission(perms) //& !this.disabled
    }
  },

};
</script>

<style scoped>
/* 分页位置 */
.pagination {
  margin-top: 15px;
  float: right;
}
</style>
